import { defineComponent, PropType } from 'vue'
import { useRouter } from 'vue-router'

import PlayCount from 'components/PlayCount'

import styles from './style.module.scss'

export default defineComponent({
  name: '',
  props: {
    id: Number as PropType<number>,
    name: String as PropType<string>,
    playCount: {
      type: Number as PropType<number>,
      required: true,
    },
    picUrl: String as PropType<string>,
  },
  setup(props) {
    const { id, name, playCount, picUrl } = props
    const router = useRouter()
    const handlePlayList = () => {
      router.push(`/playlist/${id}`)
    }
    return () => {
      return (
        <div class={styles.root} onClick={handlePlayList} key={id}>
          <div class={styles.cover}>
            {picUrl && <el-image class={styles.img} src={picUrl} fit="cover" lazy />}
            <PlayCount count={playCount} className={styles.playCount} />
            <div class={styles.playIcon}>
              <i class={[styles.icon, 'iconfont', 'icon-play2']}></i>
            </div>
          </div>
          <div class={styles.name}>{name}</div>
        </div>
      )
    }
  },
})
